<form [formGroup]="formGroup" class="lib-step-wrapper">
  <div class="flex-column">
    <div class="flex">
      <mat-form-field appearance="outline">
        <mat-label>Kind</mat-label>
        <mat-select formControlName="kind">
          <mat-option [value]="kind.STDOUT">Stdout</mat-option>
          <mat-option [value]="kind.FILE">File</mat-option>
          <mat-option [value]="kind.TFEVENT">TensorFlow Event</mat-option>
          <mat-option [value]="kind.PROMETHEUS">Prometheus</mat-option>
          <mat-option [value]="kind.CUSTOM">Custom</mat-option>
          <mat-option [value]="kind.NONE">None</mat-option>
        </mat-select>
      </mat-form-field>

      <div></div>
    </div>

    <ng-container [ngSwitch]="formGroup.get('kind').value">
      <ng-container *ngSwitchCase="kind.FILE">
        <mat-form-field appearance="outline" class="step-content ">
          <mat-label>Metrics file</mat-label>
          <input formControlName="metricsFile" matInput />
        </mat-form-field>
      </ng-container>

      <ng-container *ngSwitchCase="kind.TFEVENT">
        <mat-form-field appearance="outline" class="step-content ">
          <mat-label>TensorFlow Events Directory</mat-label>
          <input formControlName="tfDir" matInput />
        </mat-form-field>
      </ng-container>

      <ng-container *ngSwitchCase="kind.PROMETHEUS">
        <div [formGroup]="formGroup.get('prometheus')" class="two-inputs">
          <mat-form-field appearance="outline">
            <mat-label>HTTP Port</mat-label>
            <input formControlName="port" matInput type="number" step="1" />
          </mat-form-field>

          <mat-form-field appearance="outline">
            <mat-label>HTTP Path</mat-label>
            <input formControlName="path" matInput />
          </mat-form-field>
        </div>

        <div [formGroup]="formGroup.get('prometheus')" class="two-inputs">
          <mat-form-field appearance="outline">
            <mat-label>Scheme</mat-label>
            <mat-select formControlName="scheme">
              <mat-option value="HTTP">HTTP</mat-option>
              <mat-option value="HTTPS">HTTPS</mat-option>
            </mat-select>
          </mat-form-field>

          <mat-form-field appearance="outline">
            <mat-label>Host Name (optional)</mat-label>
            <input formControlName="host" matInput />
          </mat-form-field>
        </div>

        <app-list-key-value
          [formArray]="formGroup.get('prometheus').get('httpHeaders')"
          addButtonText="Add HTTP Header"
          keyLabel="Header Name"
          valueLabel="Header Value"
        ></app-list-key-value>
      </ng-container>

      <ng-container *ngSwitchCase="kind.CUSTOM">
        <div
          ace-editor
          class="ace-editor"
          [(text)]="customYaml"
          mode="yaml"
          theme="xcode"
        ></div>
      </ng-container>
    </ng-container>
  </div>

  <div class="lib-step-info-wrapper">
    <lib-step-info header="Metrics Collector">
      Define how Katib should collect the metrics from each trial, such as the
      accuracy and loss metrics.
    </lib-step-info>

    <ng-container [ngSwitch]="formGroup.get('kind').value">
      <ng-container *ngSwitchCase="kind.FILE">
        <lib-step-info header="Metrics stored in a file">
          Katib collects the metrics from an arbitrary file, where the Training
          Container should log them. You can also check an
          <a
            href="https://github.com/kubeflow/katib/blob/master/examples/v1beta1/file-metricscollector-example.yaml#L15-L22"
            >example YAML </a
          >.
        </lib-step-info>
      </ng-container>

      <ng-container *ngSwitchCase="kind.STDOUT">
        <lib-step-info header="Container's standard output">
          Katib collects the metrics from the operating system’s default output
          location (standard output).
        </lib-step-info>
      </ng-container>

      <ng-container *ngSwitchCase="kind.TFEVENT">
        <lib-step-info header="TensorFlow Event">
          Katib collects the metrics from a directory path containing a
          <a
            href="https://www.tensorflow.org/api_docs/python/tf/compat/v1/Event"
            >tf.Event</a
          >. You can also check the
          <a
            href="https://github.com/kubeflow/katib/blob/master/examples/v1beta1/tfjob-example.yaml#L16-L22"
            >TFJob example</a
          >.
        </lib-step-info>
      </ng-container>

      <ng-container *ngSwitchCase="kind.CUSTOM">
        <lib-step-info header="Custom Collector">
          You must define your own container that will be responsible for
          gathering the metrics. You can also check the
          <a
            href="https://github.com/kubeflow/katib/blob/master/examples/v1beta1/custom-metricscollector-example.yaml#L15-L35"
            >custom metrics collector example</a
          >.
        </lib-step-info>
      </ng-container>
    </ng-container>
  </div>
</form>
